<!-- 登录界面 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <style>
        body {
            background-color: antiquewhite;
            background-image: url(http://api.btstu.cn/sjbz/?lx=1);
            background-size: cover;
            background-repeat: no-repeat;
        }

        /* 使得fram_标签处于整个页面的中心位置 */
        #fram_ {
            background-image: url(https://cdn.seovx.com/ha/?mom=302);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: azure;
            border: black solid 2px;
            width: 30%;
            height: 30%;
        }

        /* 使inner_标签在frame_标签的中心位置 */
        #inner_ {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #btn01, #btn02 {
            margin-left: 25px;
        }
    </style>

</head>
<body>
<!-- 写一个简单的登录页面 -->
<div id="fram_">
    <div id="inner_">
        用户id:&nbsp;<input type="text" id="u_id"><br><br>
        密码: &nbsp; &nbsp;<input type="password" id="u_pwd"><br><br>
        <button id="btn01">重置</button>
        <button id="btn02" style="margin-left: 20px;">登录</button>
        <br>
    </div>

</div>
</body>
<!-- 验证用户id和密码是否为空，如果为空则提示不能为空 -->
<script>
    var btn01 = document.getElementById("btn01");
    var btn02 = document.getElementById("btn02");
    var u_id = document.getElementById("u_id");
    var u_pwd = document.getElementById("u_pwd");
    btn01.onclick = function () {
        u_id.value = "";
        u_pwd.value = "";
    }
    btn02.onclick = function () {
        if (u_id.value == "") {
            alert("用户id不能为空");
            document.getElementById("u_id").innerHTML = "用户id不能为空!";
        } else if (u_id.value != "admin") {
            alert("用户名不正确")
        } else if (u_pwd.value == "") {
            alert("密码不能为空");
        } else if (u_pwd.value != 123456) {
            alert("密码不正确")
        } else {
            window.location.href = "./index";
        }
    }
</script>
</html>